<template>
	<view class="content">
		<view class="search-wrapper"><u-search placeholder="请输入" bg-color="#fff" @search="search" @custom="search" height="70" v-model="listQuery.positionUserName"></u-search></view>
		<view class="list">
			<u-empty v-if="!staffList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
			<view class="formBox item" v-for="(item,index) in staffList" :key="index">
				<view class="title f-c-sb">
					<view class="f-c-fs">
						<view>姓名：{{item.storeUserName}}</view>
					</view>
					<u-checkbox :size="50" @change="checkboxChange(index, item.checkbox, item.storeUserId)" v-model=" item.checkbox"></u-checkbox>
				</view>
				<view class="f-c-fs">
					<view class="label">所属角色:</view>
					<view class="value">{{item.positionName}}</view>
				</view>
				<view class="f-c-fs">
					<view class="label">所属门店:</view>
					<view class="value">{{item.storeName}}</view>
				</view>
			</view>
			<u-loadmore v-if="!listQuery.noData && staffList.length != 0" :status="'nomore'" :load-text="{ nomore: '没有更多数据了' }" style="" />
		</view>
		<view class="btn-wrapper f-c-sa">
			<view class="text" @click="show = true">
				已选：{{ selectList.length }}位员工
				<u-icon name="arrow-up" color="#333" size="32"></u-icon>
			</view>
			<view class="btn" @click="goBack">确认</view>
		</view>
		<u-popup mode="bottom" v-model="show" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<u-empty v-if="!selectList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
					<view class="formBox item" v-for="(item,index) in selectList" :key="index">
						<view class="title f-c-sb">
							<view class="f-c-fs">
								<view>姓名：{{item.storeUserName}}</view>
							</view>
							<u-checkbox :size="50" @change="checkboxChange(index, item.checkbox, item.storeUserId)" v-model=" item.checkbox"></u-checkbox>
						</view>
						<view class="f-c-fs">
							<view class="label">所属角色:</view>
							<view class="value">{{item.positionName}}</view>
						</view>
						<view class="f-c-fs">
							<view class="label">所属门店:</view>
							<view class="value">{{item.storeName}}</view>
						</view>
					</view>
					<u-loadmore v-if="!listQuery.noData && selectList.length != 0" :status="'nomore'" :load-text="{ nomore: '没有更多数据了' }" style="" />
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import {findStoreUser,showStoreUserList } from '@/api/index.js'
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				listQuery: {
					pageNo: 1,
					pageSize: 20,
					positionUserName:''
				},
				show:false,
				staffList:[],
				selectList:[]
			};
		},
		computed:{
			...mapGetters(["userInfo","selectStaff","selectStaffStr"]),
		},
		onLoad() {
			if(this.selectStaff.length!=0){
				this.selectList = this.selectStaff;
			}else if (this.selectStaff.length == 0 && this.selectStaffStr) {
				this.getSelectList();
			}
			
			this.init()
		},
		methods:{
			init(){
				this.getlist()
				this.getSelectList()
			},
			search(value) {
				this.listQuery.noData = true;
				this.listQuery.pageNo = 1;
				this.getlist();
			},
			checkboxChange(index, status, storeUserId) {
				console.log(index, status, storeUserId);
				if (!status) {
					this.selectList.push(this.staffList[index]);
				} else {
					this.selectList.forEach((val, index) => {
						if (val.storeUserId == storeUserId) {
							this.selectList.splice(index, 1);
						}
					});
				}
			},
			checkboxChange1(index, status, storeUserId) {
				this.selectList.splice(index, 1);
				this.checkList();
			},
			checkList() {
				this.staffList.forEach((val, index) => {
					this.selectList.forEach((val1, index1) => {
						if (val.storeUserId == val1.storeUserId) {
							this.staffList[index].checkbox = true;
						}
					});
				});
			},
			goBack() {
				this.$store.commit('setSelectStaff', this.selectList);
				uni.navigateBack({
					delta: 1
				});
			},
			getlist(){
					this.listQuery.storeId=this.userInfo.storeBasicId
				findStoreUser(this.listQuery).then(res=>{
					console.log(res)
					if(this.listQuery.pageNo==1){
						this.staffList = res.data;
					}else{
						this.staffList = this.staffList.concat(res.data);
					}
					this.checkList()
					this.listQuery.pageNo+=1
					if(this.listQuery.pageSize!=res.data.length){
						this.listQuery.noData=false
					}
				})
			},
			getSelectList() {
				showStoreUserList({ storeUserId: this.selectStaffStr }).then(res => {
					res.data.forEach((val, index) => {
						res.data[index].checkbox = true;
					});
					this.selectList = res.data;
					this.checkList();
				});
			},
		}
	}
</script>

<style lang="less">
	.content{
		padding-bottom: 200rpx;
		box-sizing: border-box;
	}
.search-wrapper{
	padding: 20rpx;
	box-sizing: border-box;
	
}
.list{
	.item{
		.type{
			height: 36rpx;
			background: #ff6738;
			border-radius: 6rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 24rpx;
			font-weight: 700;
			color: #ffffff;
			margin-left: 15rpx;
			padding: 0 10rpx;
		}
		.type1{
			height: 36rpx;
			background: #2db2ad;
			border-radius: 6rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 24rpx;
			font-weight: 700;
			color: #ffffff;
			margin-left: 15rpx;
			padding: 0 10rpx;
		}
		.label{
			margin: 15rpx 0;
		}
	}
}
.btn-wrapper{
	width: 750rpx;
	height: 137rpx;
	background: #ffffff;
	font-size: 32rpx;
	font-weight: 700;
	color: #177fff;
	position: fixed;
	bottom: 0;
	left: 0;
	.btn{
		width: 410rpx;
		height: 100rpx;
		background: #177fff;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		color: #ffffff;
		line-height: 100rpx;
	}
}
</style>
